<template>
  <div class="home">
    <p class="location"><img src="@/assets/mdsy02.png" alt=""> <span>{{info.city}}</span></p>
    <p class="store-title">{{info.title}}</p>
    <p class="address" @click="router({path: './storeDetails'})">{{info.address}} <img src="@/assets/mdsy03.png" alt=""></p>
    <p class="search" @click="router({path: './searchPerson',query:{type:'search'}})">
      <img class="search-img" src="@/assets/mdsy04.png" alt="">
      <span>搜索会员名称</span>
    </p>
    <p class="title">门店管理服务</p>
    <div class="home-block clear">
      <div class="con" @click="router({path: './personList'})">
        <img src="@/assets/mdsy06.png" alt="">
        <p class="con-title">会员管理</p>
      </div>
      <div class="con" @click="router({path: './applyCard'})">
        <img src="@/assets/mdsy07.png" alt="">
        <p class="con-title">会员办卡</p>
      </div>
      <div class="con" @click="router({path: './clockManage'})">
        <img src="@/assets/mdsy08.png" alt="">
        <p class="con-title">打卡管理</p>
      </div>
      <div class="con" @click="router({path: './cardRecord'})">
        <img src="@/assets/mdsy09.png" alt="">
        <p class="con-title">记录明细</p>
      </div>
      <div class="con" @click="router({path: './teacherManage'})">
        <img src="@/assets/mdsy10.png" alt="">
        <p class="con-title">讲师管理</p>
      </div>
      <div class="con" @click="router({path: './forgetPwd'})">
        <img src="@/assets/mdsy11.png" alt="">
        <p class="con-title">修改密码</p>
      </div>
      <div class="con">
      </div>
      <div class="con">
      </div>
    </div>
  </div>
</template>

<script>

import {home} from '@/api/api'
export default {
  components: {
  },
  data () {
    return {
      info:[]
    }
  },
  created () {
    this.getHome()
  },
  mounted () {
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    getHome() {
      home().then((res) =>{
        console.log(res.data.info)
        this.info=res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.home
  background-image url('../assets/mdsy01.png')
  min-height 100vh
  background-repeat no-repeat
  background-size 100%
  width 100%
  overflow hidden
  background-color #fff
  .location
    background-color rgba(0,0,0,.4)
    padding .6rem 1.3rem
    display inline-block
    border-radius 100px
    margin-top 4rem
    margin-left 1.5rem
    img
      display inline-block
      vertical-align middle
      width 1rem
      position relative
      top -.1rem
      margin-right .2rem
    span
      color #ffffff
      font-size 1.3rem
      font-weight bold
      display inline-block
      vertical-align middle
      position relative
      top -.1rem
  .store-title
    font-size 2.1rem
    color #fff
    font-weight bold
    margin-top .8rem
    margin-left 1.5rem
  .address
    font-size 1.3rem
    color #fff
    margin-top 4.5rem
    padding 0 1.5rem
    padding-right 3rem
    position relative
    display inline-block
    img
      position absolute
      width .6rem
      right 1rem
      top .5rem
  .search
    margin-top 1.7rem
    height 5rem
    margin-left 1.5rem
    box-shadow 0px 6px 10px 0px rgba(217,217,217,0.6)
    border-radius 100px
    width calc(100vw - 3rem)
    background-color #fff
    position relative
    .search-img
      position absolute
      width 1.6rem
      height 1.6rem
      top 1.7rem
      left 3rem
    span
      color #989BA4
      font-size 1.3rem
      font-weight bold
      line-height 5rem
      position absolute
      left 6rem
  .title
    margin-top 2rem
    font-size 1.7rem
    color #333
    font-weight bold
    margin-left 1.5rem
  .home-block
    border-bottom 1px solid #e6e6e6
    margin-top 2rem
    .con
      float left
      width 25%
      border-top 1px solid #e6e6e6
      border-right 1px solid #e6e6e6
      text-align center
      padding-bottom 1.8rem
      box-sizing border-box
      min-height 9.1rem
      &:nth-child(4n)
        border-right none
      img
        width 2.2rem
        height 2.2rem
        display inline-block
        margin-top 2rem
        margin-bottom .5rem
      span
        color #2F3C52
        font-size 1.2rem
        font-weight 500
        display block
</style>